<template>
  <div class="pos" style="height:100%">
    <el-row style="height:100%">
      <el-col :span="7" style="height:100%" class="pos-order">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border style="width:100%">
              <el-table-column prop="goodsName" label="名称" width="75"></el-table-column>
              <el-table-column prop="count" label="数量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                  <!-- 将scope里的数据传到addOrderList -->
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div>
              数量:{{this.totalCount}} &nbsp;&nbsp;&nbsp;&nbsp;金额：{{this.money}}
            </div>
            <div class="btn-group">
              <el-button type="warning">挂单</el-button>
              <el-button type="danger" @click="delAll()">删除</el-button>
              <el-button type="success" @click="checkOut()">结账</el-button>

            </div>

          </el-tab-pane>
          <el-tab-pane label="挂单">
            挂单
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17" style="height:100%">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="ofter-goods-list">
            <ul>
              <li v-for="(item,index) in oftenGoods" @click="addOrderList(item)" :key="index">
                <span>{{item.goodsName}}</span>
                <span class="o-price">￥{{item.price}}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div>
                <ul class="cookList">
                  <li v-for="(item,index) in type0List" @click="addOrderList(item)" :key="index">
                    <span class="foodImg">
                      <img :src="item.foodImg" width="50" alt="">
                    </span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食" >
              <div>
                <ul class="cookList">
                  <li v-for="(item,index) in type1List" @click="addOrderList(item)" :key="index">
                    <span class="foodImg">
                      <img :src="item.foodImg" width="50" alt="">
                    </span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>


      </el-col>
    </el-row>
   
  </div>
</template>

<script>
export default {
  name: 'Pos',
  methods: {
    addOrderList(goods){
      //商品是否已经存在于订单列表中
      let isHave = false
      console.log(goods)
      for(let i=0;i<this.tableData.length;i++){
        if(this.tableData[i].goodsId == goods.goodsId){
          isHave=true
        }
      }

      if(isHave){
        //有这个商品时
        let arr = this.tableData.filter(o=>o.goodsId == goods.goodsId)
        arr[0].count++
      }else{
        //判断菜单中没有这个商品时
        let newGoods = {
          goodsId:goods.goodsId,
          goodsName:goods.goodsName,
          price:goods.price,
          count:1
          }
          this.tableData.push(newGoods)
      }
      this.getAllMoney()
    },
    //删除全部商品
    delAll(){
      this.tableData = [];
      this.money = 0
      this.totalCount = 0
    },
    //删除单个商品
    delSingleGoods(goods){
      // filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，
      // 若返回值为true，这个元素保存到新数组中；
      // 若返回值为false，则该元素不保存到新数组中；原数组不发生改变。
      this.tableData = this.tableData.filter(o=>o.goodsId != goods.goodsId)
      this.getAllMoney()
    },
    //获取最钱数
    getAllMoney(){
      this.money = 0
      this.totalCount = 0
      if(this.tableData){
        this.tableData.forEach(item=>{
          this.totalCount+=item.count
          this.money=item.price*item.count + this.money 
        })
      }
    },
    // 模拟结账
    checkOut(){
      if(this.totalCount != 0){
        this.tableData = []
        this.money = 0
        this.totalCount = 0
        //element-ui的方法
        this.$message({
          message:'结账成功',
          type:'success'
        })
      }else{
        this.$message.error('不能空结')
      }
    }
  },
  data(){
    return {
      tableData: [
        
      ],
      oftenGoods:[
        {
          goodsId:123,
          goodsName: '香辣鸡腿堡',
          price: 15,
          count: 1,
        },
        {
          goodsId:1234,
          goodsName: '香辣鸡腿堡2',
          price: 16,
          count: 1,
        },
        {
          goodsId:1235,
          goodsName: '田园鸡腿堡',
          price: 13,
          count: 1,
        },
        {
          goodsId:1233,
          goodsName: '鸡肉卷',
          price: 9,
          count: 1,
        },
        {
          goodsId:12334,
          goodsName: '鸡肉卷',
          price: 9,
          count: 1,
        },
        {
          goodsId:1231,
          goodsName: '鸡肉卷',
          price: 9,
          count: 1,
        },
        {
          goodsId:1223,
          goodsName: '鸡肉卷',
          price: 9,
          count: 1,
        },
      ],
      type0List:[
        {
          goodsId:123,
          goodsName: '香辣鸡腿堡',
          price: 15,
          foodImg:require("@/assets/hanbao.jpg")
        },
        {
          goodsId:1235,
          goodsName: '田园鸡腿堡',
          price: 13,
          foodImg:require("@/assets/hanbao.jpg")
        },
        {
          goodsId:123555,
          goodsName: '双层牛肉堡',
          price: 23,
          foodImg:require("@/assets/hanbao.jpg")
        },
        {
          goodsId:123335,
          goodsName: '全家桶',
          price: 99,
          foodImg:require("@/assets/hanbao.jpg")
        },
      ],
      type1List:[],
      money:0,
      totalCount:0,
    }
  }
}
</script>

<style scoped>
.pos-order{
  background: #f9fafc;
  border-right: 1px solid #c0ccda;
}
.btn-group{
  margin-top: 10px;
}
.title{
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background: #f9fafc;
  padding: 10px;
  text-align: left;
}
.ofter-goods-list ul li{
  list-style: none;
  float: left;
  border: 1px solid lightblue;
  padding: 10px;
  margin: 10px;
  background: #fff;
}
.o-price{
  color: #58b7ff;
}
.goods-type{
  clear: both;
}
.cookList li{
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auto;
  overflow: hidden;
  background: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
}
.foodImg{
  width: 40%;
}
.cookList li span{
  display: block;
  float: left;
}
.foodName{
  font-size: 15px;
  padding-left: 10px;
  color: brown;
}
.foodPrice{
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
</style>
